<template>
  <view class="body">
    <!-- <uni-datetime-picker
      type="date"
      v-model="state.today"
      :end="state.now.getTime()"
      @change="setDate"
      @maskClick="state.datepickShow = false"
    > -->
    <view class="date_top">
      <view class="date_btn" @tap="showCalendar">
        <text class="date">{{ isToday(state.today) }}</text>
        <image
          class="img_arrow"
          v-if="!state.datepickShow"
          src="@/static/image/raozg/arrow_down.png"
        />
        <image
          class="img_arrow"
          v-if="state.datepickShow"
          src="@/static/image/raozg/arrow_up.png"
        />
      </view>
    </view>
    <up-popup :show="state.dateShow" :round="32" mode="bottom" @close="closeCalendar">
      <uni-calendar 
      :date="formatDate(state.today, 'yyyy-MM-dd')" 
      :showMonth="false" 
      :selected="state.dateSelects"
      :start-date="formatDate(state.yearsAgo, 'yyyy-MM-dd')"
      :end-date="formatDate(state.now, 'yyyy-MM-dd')"
      @change="setDate"
      @monthSwitch="getMouthDate"
        />
    </up-popup>
    <!-- </uni-datetime-picker> -->
    <view class="seven">
      <view
        v-for="(item, index) in state.weekList"
        :key="index"
        :class="['items', index == state.active ? 'active' : '']"
        >{{ transformChinese(item, index) }}</view
      >
    </view>
    <view class="today_food">
      <image class="img_record" src="@/static/image/raozg/foodRecord.png" />
      <view class="circle_progress">
        <zui-progress-circle
          :position="element.power.percent"
          :range="[270, 260]"
          :texture="['#00d1b6', '#f7f8fa']"
          :ringWidth="6"
          :size="120"
        />
        <view class="center_text">
          <view class="progress_num">{{ element.power.num.toFixed(0) }}</view>
          <view class="progress_has">已摄入千卡</view>
        </view>
      </view>
      <view class="element_list">
        <view class="element">
          <view class="title">
            <text class="title_name">碳水化合物</text>
            <text class="title_unit">g</text>
          </view>
          <progress
            :percent="element.carbon.percent"
            activeColor="#657EFF"
            :border-radius="100"
            stroke-width="4"
          ></progress>
          <view class="nums">{{ element.carbon.num.toFixed(2) }}</view>
        </view>
        <view class="element">
          <view class="title">
            <text class="title_name">蛋白质</text>
            <text class="title_unit">g</text>
          </view>
          <progress
            :percent="element.protein.percent"
            activeColor="#FF8450"
            :border-radius="100"
            stroke-width="4"
          ></progress>
          <view class="nums">{{ element.protein.num.toFixed(2) }}</view>
        </view>
        <view class="element">
          <view class="title">
            <text class="title_name">脂肪</text>
            <text class="title_unit">g</text>
          </view>
          <progress
            :percent="element.fat.percent"
            activeColor="#63A1FF"
            :border-radius="100"
            stroke-width="4"
          ></progress>
          <view class="nums">{{ element.fat.num.toFixed(2) }}</view>
        </view>
      </view>
    </view>
    <view
      v-if="mealInfo.length == 0"
      class="nodata"
    >
      <image class="img_nodata" src="@/static/image/raozg/noData.png" />
      <view class="nodata_text">还没有记录</view>
      <view class="nodata_text">请点击屏幕下方按钮来添加</view>
    </view>
    <!-- <view v-for="(i, idx) of tabList" :key="i">
      <view v-if="mealInfo[i]" class="meal_list">
        <view class="title">
          <text class="title_name">{{ i }}</text>
          <text class="title_power">已摄入{{ computeTotal((mealInfo[i] ? mealInfo[i] : [])) }}千卡</text>
        </view>
        <view class="meal_list_items">
          <view v-for="(item, index) of (mealInfo[i] ? mealInfo[i] : [])" :key="index" @tap="editFood(item, idx)" class="meal_list_item">
            <view class="name">{{ item.dietName }}</view>
            <view class="weight">{{ item.amount }}克</view>
            <view class="item_right">
              <view class="power">{{ item.energy }}千卡</view>
              <image class="img_more" src="@/static/image/raozg/more.png" />
            </view>
          </view>
        </view>
      </view>
    </view> -->
    <view v-for="(i, idx) of mealInfo" :key="idx" class="meal_list">
      <view class="title">
        <text class="title_name">{{ i.dietType }}</text>
        <text class="title_power">已摄入{{ computeTotal(i.list).toFixed(2) }}千卡</text>
      </view>
      <uni-swipe-action>
        <uni-swipe-action-item
          v-for="(item, index) of i.list"
          :key="index"
          :right-options="options"
          @click="handleClick(item)"
        >
          <view class="meal_list_items">
            <view @tap="editFood(item)" class="meal_list_item">
              <view class="name">{{ item.dietName }}</view>
              <view class="weight">{{ item.amount }}克</view>
              <view class="item_right">
                <view class="power">{{ (item.amount * item.energy / 100).toFixed(2) }}千卡</view>
                <image class="img_more" src="@/static/image/raozg/more.png" />
              </view>
            </view>
          </view>
        </uni-swipe-action-item>
      </uni-swipe-action>
    </view>
    <!-- 食物重量设置 -->
    <up-popup :show="state.setShow" :round="32" mode="bottom" closeable @close="close" >
        <view class="food_info">
            <view class="title">
              {{ editInfo.date + ' ' + editInfo.foodInfo.dietType }}
            </view>
            <view class="info_top">
                <view class="name">{{ editInfo.foodInfo.dietName }}</view>
                <view class="power">{{ editInfo.foodInfo.energy }}千卡/100克</view>
            </view>
            <view class="info_detail">
                <view class="detail_item">
                    <view class="text">热量</view>
                    <view>{{ (editInfo.foodInfo.energy * (editInfo.foodInfo.amount / 100)).toFixed(1) }}千卡</view>
                </view>
                <view class="detail_item">
                    <view class="text">碳水化合物</view>
                    <view>{{ (editInfo.foodInfo.cho * (editInfo.foodInfo.amount / 100)).toFixed(1) }}克</view>
                </view>
                <view class="detail_item">
                    <view class="text">蛋白质</view>
                    <view>{{ (editInfo.foodInfo.pro * (editInfo.foodInfo.amount / 100)).toFixed(1) }}克</view>
                </view>
                <view class="detail_item">
                    <view class="text">脂肪</view>
                    <view>{{ (editInfo.foodInfo.fat * (editInfo.foodInfo.amount / 100)).toFixed(1) }}克</view>
                </view>
            </view>
            <view class="input_info">
                <input type="digit" class="weight_input" :focus="state.tipFocus" :adjustPosition="false" :maxlength="4" @input="onInput" @keyboardheightchange="onKey" v-model="editInfo.foodInfo.amount" />
                <view class="unit">克</view>
                <view class="hot">(热量约{{ (editInfo.foodInfo.energy * (editInfo.foodInfo.amount / 100)).toFixed(1) }}千卡)</view>
            </view>
            <button class="submit" @tap="setConfirm">确定</button>
            <view class="bottom_box" :style="{height: `${ state.bottomHeight }rpx`}"></view>
        </view>
    </up-popup>
    <!-- 底部导航 -->
    <view class="tabs">
      <view
        class="tab"
        @tap="setFood('早餐')"
      >
        <icon type="" class="iconfont icon-zaocan1 img_tab"></icon>
        <view>
          <text type="" v-if="mealInfo.findIndex(item => item.dietType === '早餐') != -1" class="iconfont icon-gouxuan img_finish"></text>
          <text v-else class="add">+</text>
          <text class="tab_text">早餐</text>
        </view>
      </view>
      <view
        class="tab"
        @tap="setFood('午餐')"
      >
        <icon type="" class="iconfont icon-wufan img_tab"></icon>
        <view>
          <text type="" v-if="mealInfo.findIndex(item => item.dietType === '午餐') != -1" class="iconfont icon-gouxuan img_finish"></text>
          <text v-else class="add">+</text>
          <text class="tab_text">午餐</text>
        </view>
      </view>
      <view
        class="tab"
        @tap="setFood('晚餐')"
      >
        <icon type="" class="iconfont icon-wanfan1 img_tab"></icon>
        <view>
          <text type="" v-if="mealInfo.findIndex(item => item.dietType === '晚餐') != -1" class="iconfont icon-gouxuan img_finish"></text>
          <text v-else class="add">+</text>
          <text class="tab_text">晚餐</text>
        </view>
      </view>
      <view class="tab" @tap="state.show = true ">
        <icon type="" class="iconfont icon-jiacan1 img_tab"></icon>
        <view>
          <text class="add">+</text>
          <text class="tab_text">加餐</text>
        </view>
      </view>
    </view>
    <up-popup :show="state.show" :round="32" mode="bottom" @close="state.show = false">
      <view class="lists">
        <view @tap="setFood('早加餐')" class="item">早加餐</view>
        <view @tap="setFood('午加餐')" class="item">午加餐</view>
        <view @tap="setFood('晚加餐')" class="item">晚加餐</view>
      </view>
      <view class="cancel" @tap="state.show = false ">取消</view>
    </up-popup>
  </view>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { formatDate } from '@/utils/util'
import { throttle, deepCopy } from '@/utils/tools'
import { onLoad, onShow } from '@dcloudio/uni-app'
import { query_get_food, update_food, delete_food, query_mouth_food } from '@/api/food'

const state = reactive({
  now: new Date(),
  yearsAgo: new Date().setFullYear(new Date().getFullYear() - 1),
  today: new Date(),
  datepickShow: false,
  dateShow: false,
  dateSelects: [],
  show: false,
  setShow: false,
  userInfo: {},
  active: 0,
  weekList: [],
  tipFocus: false,
  bottomHeight: 0
})
const tabList = ref(['早餐', '早加餐', '午餐', '午加餐', '晚餐', '晚加餐'])
const options = reactive([
  {
    text: '删除',
    style: {
      backgroundColor: '#ff503d'
    }
  }
])
const mealInfo = ref([])
const editInfo = reactive({
  date: '',
  type: '',
  foodInfo: {}
})
const element = reactive({
  power: {
    num: 0,
    percent: 1.1
  },
  carbon: {
    num: 0,
    percent: 100
  },
  protein: {
    num: 0,
    percent: 100
  },
  fat: {
    num: 0,
    percent: 100
  }
})

onShow(() => {
  state.userInfo = uni.getStorageSync('userInfo') ? JSON.parse(uni.getStorageSync('userInfo')).patientInfo : {}
  state.show = false // 加餐成功返回关闭加餐弹窗
  getTime()
  getData()
  let currentMouth = {
    year: new Date().getFullYear(),
    month: new Date().getMonth() + 1
  }
  getMouthDate(currentMouth)
  console.log('今天',state.today)
})

const showCalendar = () => {
  state.datepickShow = !state.datepickShow
  state.dateShow = !state.dateShow
}
const closeCalendar = () => {
  state.dateShow = false
  state.datepickShow = false
}

const getData = () => {
  let params = {
    empi: state.userInfo.empi,
    date: formatDate(state.today, 'yyyy-MM-dd')
  }
  query_get_food(params).then(res => {
    mealInfo.value = res.data
    // 计算今日饮食总能量
    element.power.num = 0
    element.carbon.num = 0
    element.protein.num = 0
    element.fat.num = 0
    res.data.forEach(i => {
      element.power.num += computeTotal(i.list)
      element.carbon.num += computeElement(i.list, 'cho')
      element.protein.num += computeElement(i.list, 'pro')
      element.fat.num += computeElement(i.list, 'fat')
    })
  })
}
const getMouthDate = (e) => {
  e.month = Number(e.month)
  let mouthStart = (e.month == 1 ? e.year - 1 : e.year) + '/' + (e.month == 1 ? 12 : e.month - 1) + '/20'
  let mouthEnd = (e.month == 12 ? e.year + 1 : e.year) + '/' + (e.month == 12 ? 1 : e.month + 1) + '/15'
  let params = {
    empi: state.userInfo.empi,
    start: formatDate(new Date(mouthStart), 'yyyy-MM-dd hh:mm:ss'),
    end: formatDate(new Date(mouthEnd), 'yyyy-MM-dd hh:mm:ss')
  }
  query_mouth_food(params).then((res) => {
    if (res.data && res.data.length > 0) {
      res.data.forEach(item => {
        item.date = item.dietDate
        item.info = ''
      })
      state.dateSelects = res.data
    }
  })
}
const computeTotal = (arr: Array) => {
  // 计算热量
  let total = 0
  arr.forEach(item => {
    total += item.energy * item.amount / 100
  })
  return total
}
const computeElement = (arr: Array, type: string) => {
  // 计算营养素综合
  let total = 0
  arr.forEach(item => {
    total += item[type] * item.amount / 100
  })
  return total
}

const getTime = () => {
  let day = state.today.getDay()
  state.weekList = [1, 2, 3, 4, 5, 6, 7]
  state.weekList.forEach((item, index) => {
    if (day === 0) {
      state.active = 6
    }
    if (day == item) {
      state.active = index
    }
  })
  // for(let i=0;i<7;i++) {
  //     state.weekList.push(day)
  //     if (day == 7) {
  //         day = 1
  //     } else {
  //         day++
  //     }
  // }
}
const transformChinese = (item, index) => {
  switch (item) {
    case 1:
      return '一'
    case 2:
      return '二'
    case 3:
      return '三'
    case 4:
      return '四'
    case 5:
      return '五'
    case 6:
      return '六'
    case 7:
      return '日'
  }
}
const isToday = (val) => {
  // 今天昨天前天转换
  let select = formatDate(val, 'yyyy/MM/dd') + ' 00:00:00'
  let today = formatDate(state.now, 'yyyy/MM/dd') + ' 00:00:00'
  if (new Date(today).getTime() - new Date(select).getTime() == 0) {
    return '今天'
  } else if (new Date(today).getTime() - new Date(select).getTime() == 86400000) {
    return '昨天'
  } else if (new Date(today).getTime() - new Date(select).getTime() == 172800000) {
    return '前天'
  } else {
    return formatDate(val, 'yyyy.MM.dd')
  }
}
const setDate = (e) => {
  state.datepickShow = false
  state.dateShow = false
  state.today = new Date(e.fulldate)
  getTime()
  getData()
}
const editFood = (val: any) => {
  let now = new Date(state.today)
  let date = now.getMonth() + 1 + '月' + now.getDate() + '日'
  editInfo.date = date
  editInfo.type = val.dietType
  editInfo.foodInfo = deepCopy(val)
  state.setShow = true
  setTimeout(() => {
    // 解决弹窗打开时，input无法获取焦点问题
    state.tipFocus = true
  },100)
}
const setConfirm = () => {
  if (!editInfo.foodInfo.amount || editInfo.foodInfo.amount == '0') {
    uni.showToast({
        title: '重量不能为0或空!',
        icon: 'error'
    })
    return
  }
  editInfo.foodInfo.dietDate = formatDate(new Date(), 'yyyy-MM-dd')
  editInfo.foodInfo.amount = Number(editInfo.foodInfo.amount)
  update_food(editInfo.foodInfo).then(res => {
      uni.showToast({
        title: '修改成功'
      })
      state.setShow = false
      state.tipFocus = false
      getData()
  })
}
const handleClick = (item: any) => {
  // 删除食物
  uni.showLoading()
  delete_food(item.id).then(res => {
    uni.showToast({
      title: '删除成功'
    })
    uni.hideLoading()
    getData()
  })
}
const setFood = (val: string) => {
  uni.navigateTo({
    url: '/pages/dailyFood/detail?food=' + val + '&date=' + formatDate(state.today, 'yyyy-MM-dd')
  })
}
const onKey = (e) => {
  const sys = uni.getSystemInfoSync()
  // 弹出键盘事件
  if (e.detail.height) {
    state.bottomHeight = e.detail.height * 2 - (sys.safeAreaInsets.bottom * 2) - 36
  } else {
    state.bottomHeight = 0
  }
}
const onInput = (e) => {
    if (e.detail.value * 1 > 3000) {
      editInfo.foodInfo.amount = 3000
    }
}

const close = () => {
  state.setShow = false
  state.tipFocus = false
  state.bottomHeight = 0
}
</script>

<style lang="scss" scoped>
.body {
  padding: 0 32rpx;
  padding-bottom: calc(156rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(156rpx + env(safe-area-inset-bottom));
  .date_top {
    text-align: center;
    .date_btn {
      display: inline-block;
      height: 60rpx;
      line-height: 60rpx;
      padding: 0 32rpx;
      text-align: center;
      box-sizing: border-box;
      background: #ffffff;
      border-radius: 38rpx;
      margin: 24rpx auto;
      .date {
        font-weight: 400;
        font-size: 28rpx;
        color: #222222;
      }
      .img_arrow {
        width: 24rpx;
        height: 24rpx;
        margin-left: 16rpx;
      }
    }
  }
  .seven {
    display: flex;
    justify-content: space-between;
    gap: 24rpx;
    margin-bottom: 26rpx;
    .items {
      width: 77rpx;
      height: 76rpx;
      line-height: 76rpx;
      text-align: center;
      background: #fff;
      border-radius: 12rpx;
      font-weight: 400;
      font-size: 28rpx;
      box-sizing: border-box;
      color: #222222;
    }
    .active {
      color: #fff;
      background: #00d1b6;
    }
  }
  .today_food {
    width: 686rpx;
    height: 428rpx;
    background: #ffffff;
    border-radius: 16rpx;
    padding: 32rpx;
    box-sizing: border-box;
    position: relative;
    .img_record {
      width: 192rpx;
      height: 44rpx;
      position: absolute;
      top: 0;
      left: 0;
    }
    .circle_progress {
      width: 100%;
      height: 240rpx;
      margin-bottom: 24rpx;
      .center_text {
        margin-top: -170rpx;
        text-align: center;
        .progress_num {
          font-weight: 600;
          font-size: 48rpx;
          color: #222222;
          margin-bottom: 8rpx;
        }
        .progress_has {
          font-weight: 400;
          font-size: 24rpx;
          color: #666666;
        }
      }
    }
    .element_list {
      display: flex;
      justify-content: space-between;
    }
    .element {
      width: 26%;
      .title {
        display: flex;
        justify-content: space-between;
        margin-bottom: 16rpx;
        .title_name {
          font-weight: 400;
          font-size: 28rpx;
          color: #222222;
        }
        .title_unit {
          font-weight: 400;
          font-size: 24rpx;
          color: #999999;
        }
      }
      .nums {
        font-weight: 400;
        font-size: 24rpx;
        color: #999999;
        margin-top: 16rpx;
      }
    }
  }
  .nodata {
    text-align: center;
    .img_nodata {
      width: 320rpx;
      height: 240rpx;
      margin-top: 60rpx;
    }
    .nodata_text {
      font-weight: 400;
      font-size: 28rpx;
      color: #666666;
    }
  }
  .meal_list {
    background: #ffffff;
    border-radius: 16rpx;
    margin-top: 24rpx;
    padding: 32rpx;
    .title {
      display: flex;
      align-items: center;
      .title_name {
        font-weight: 500;
        font-size: 32rpx;
        color: #333333;
      }
      .title_power {
        font-weight: 400;
        font-size: 22rpx;
        color: #999999;
        margin-left: 16rpx;
      }
    }
    .meal_list_items {
      ::v-deep .uni-swipe {
        margin-top: 24rpx;
      }
      ::v-deep .uni-swipe_button {
        border-radius: 0 12rpx 12rpx 0 !important;
        font-weight: 400;
        font-size: 24rpx;
        color: #ffffff;
      }
      .meal_list_item {
        border-bottom: 1px solid #e5e6eb;
        margin-top: 24rpx;
        padding-bottom: 24rpx;
        box-sizing: border-box;
        position: relative;
        .name {
          font-weight: 500;
          font-size: 30rpx;
          color: #333333;
          margin-bottom: 10rpx;
        }
        .weight {
          font-weight: 400;
          font-size: 28rpx;
          color: #999999;
        }
        .power {
          font-weight: 400;
          font-size: 24rpx;
          color: #999999;
          margin-right: 16rpx;
        }
        .item_right {
          display: flex;
          position: absolute;
          right: 0;
          top: 20rpx;
          .img_more {
            width: 32rpx;
            height: 32rpx;
          }
        }
        &:last-child {
          border: none;
          padding-bottom: 0;
        }
      }
    }
  }
  .tabs {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
    background: #fff;
    padding: 16rpx 64rpx;
    box-sizing: border-box;
    border-top: 1rpx solid #e5e6eb;
    padding-bottom: calc(30rpx + constant(safe-area-inset-bottom));
    padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
    .tab {
      .img_tab {
        font-size: 48rpx;
        margin-bottom: -8rpx;
      }
      .add {
        font-weight: 400;
        font-size: 20rpx;
        color: #666666;
      }
      .img_finish {
        font-size: 20rpx;
        margin-right: 2rpx;
      }
      .tab_text {
        font-weight: 400;
        font-size: 20rpx;
        color: #666666;
      }
    }
  }
  ::v-deep .u-popup {
    .u-popup__content {

      overflow: hidden;
        // 设置重量弹窗
        .food_info {
          padding: 0 32rpx;
          .title {
              width: 100%;
              text-align: center;
              height: 104rpx;
              line-height: 104rpx;
              font-weight: 500;
              font-size: 30rpx;
              color: #333333;
          }
          .info_top {
              .name {
                  font-weight: 500;
                  font-size: 30rpx;
                  color: #222222;
                  margin-bottom: 10rpx;
              }
              .power {
                  font-weight: 400;
                  font-size: 28rpx;
                  color: #666666;
              }
          }
          .info_detail {
              display: flex;
              justify-content: space-between;
              margin: 26rpx 0 30rpx;
              padding: 20rpx 38rpx;
              box-sizing: border-box;
              border-top: 1rpx solid #e5e6eb;
              border-bottom: 1rpx solid #e5e6eb;
              font-weight: 400;
              font-size: 24rpx;
              color: #999999;
              .detail_item {
                  flex: 1;
                  text-align: center;
                  .text {
                      margin-bottom: 10rpx;
                  }
              }
          }
          .input_info {
              text-align: center;
              position: relative;
              .weight_input {
                  width: 200rpx;
                  height: 84rpx;
                  border-bottom: 4rpx solid #1cd7ae;
                  margin: 0 auto;
                  font-weight: 500;
                  font-size: 60rpx;
                  color: #1CD7AE;
              }
              .unit {
                  font-weight: 500;
                  font-size: 24rpx;
                  color: #1CD7AE;
                  position: absolute;
                  right:235rpx;
                  top: 0;
              }
              .hot {
                  font-weight: 400;
                  font-size: 24rpx;
                  color: #666666;
                  margin-top: 16rpx;
              }
          }
          .submit {
              width: 100%;
              height: 88rpx;
              line-height: 88rpx !important;
              background: #00D1B6;
              border-radius: 50rpx;
              font-weight: 500;
              font-size: 32rpx !important;
              padding: 0 !important;
              color: #FFFFFF;
              margin: 76rpx 0 32rpx;
          }
      }
      // 加餐弹窗
      .lists {
        .item {
          height: 108rpx;
          line-height: 108rpx;
          text-align: center;
          border-bottom: 1px solid #e5e6eb;
          font-weight: 400;
          font-size: 32rpx;
          color: #00d1b6;
        }
        .item:last-child{
          border: none;
        }
      }
      .cancel {
        height: 108rpx;
        line-height: 108rpx;
        text-align: center;
        border-top: 15rpx solid #F2F3F5;
        font-weight: 400;
        font-size: 32rpx;
        color: #222222;
      }
      .uni-calendar {
        .uni-calendar__header {
          .uni-calendar__header-text {
            font-size: 30rpx !important;
          }
        }
        .uni-calendar__box {
          .uni-calendar__weeks-day-text {
            font-size: 30rpx !important;
          }
          .uni-calendar-item__weeks-box-text {
            font-size: 30rpx !important;
          }
          .uni-calendar-item--isDay {
            border-radius: 8rpx;
          }
        }
      }
    }
  }
  ::v-deep .dialog-close {
    display: none;
  }
  ::v-deep .uni-calendar-item--isDay {
    background: #00D1B6;
  }
  ::v-deep .uni-calendar-item--checked {
    background: #00D1B6;
  }
  ::v-deep .uni-date-editor {
    width: 254rpx;
    margin: 0 auto;
  }
  ::v-deep .uni-calendar-item--isDay-text {
    color: #00d1b6;
  }
  ::v-deep .uni-calendar-item--isDay .uni-calendar-item--isDay-text {
    color: #fff;
  }
  ::v-deep .uni-calendar-item__weeks-box-circle {
    background: #00D1B6;
  }
  ::v-deep .uni-calendar-item__weeks-box .uni-calendar-item--checked {
    background-color: #00d1b6;
  }
  ::v-deep .uni-calendar__weeks-day {
    background: #ebfbf9;
    .uni-calendar__weeks-day-text {
      color: #00d1b6;
    }
  }
  ::v-deep .uni-datetime-picker--btn {
    background-color: #00d1b6;
    height: 88rpx;
    line-height: 88rpx;
  }
  ::v-deep .uni-progress-bar, ::v-deep .uni-progress-inner-bar {
    border-radius: 100rpx;
  }
  ::v-deep .u-icon__icon {
    font-size: 40rpx !important;
    top: 16rpx !important;
  }
}
</style>
